<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>  
           div{
             width:200px;height:150px;
             border:1px solid red;
             display:inline-block;
           }
           
           div.c1{background-color:#f0c;}
           div.c2{background-color:rgb(0,0,255);}
           div.c3{background-color:rgba(0,0,255,0.5);}  /*带透明度  取值范围:0-1  */
           div.c4{background-color:hsl(0,100%,50%);}  /* 色相 饱合度 亮度 */
           div.c5{background-color:hsla(0,100%,50%,0.5);}  /* 色相 饱合度 亮度 透明度 */
           div.c6{
                background-color:red;
                opacity:0.5
           }  
        </style>
    </head>
    <body>
        <h2>CSS样式实例:颜色属性</h2>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
        <div class='c4'></div>
        <div class='c5'></div>
        <div class='c6'></div>
        
    </body>
</html>